<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">

            <div class="btn-group" uib-dropdown if-permission="manageCase">
                <button type="button" class="btn btn-sm btn-default" uib-dropdown-toggle
                    ng-disabled="$vm.selection.length === 0">
                    <ng-pluralize count="$vm.selection.length"
                        when="{'0': 'No case selected', 'one': '{} selected case', 'other': '{} selected cases'}">
                    </ng-pluralize>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li>
                        <a href ng-click="$vm.bulkEdit()"><i class="fa fa-edit"></i> Edit</a>
                    </li>
                    <li class="divider"></li>
                    <li ng-if="$vm.menu.flag">
                        <a href ng-click="$vm.bulkFlag(true)"><i class="fa fa-flag"></i> Add flag</a>
                    </li>
                    <li ng-if="$vm.menu.unflag">
                        <a href ng-click="$vm.bulkFlag(false)"><i class="fa fa-flag-o"></i> Remove flag</a>
                    </li>
                    <li ng-if="$vm.menu.reopen">
                        <a href ng-click="$vm.bulkReopen()"><i class="fa fa-folder-open"></i> Reopen</a>
                    </li>
                    <li ng-if="$vm.menu.close">
                        <a href ng-click="$vm.bulkClose()"><i class="fa fa-folder"></i> Close</a>
                    </li>
                    <li ng-if="$vm.menu.delete" class="divider"></li>
                    <li>
                        <a href ng-click="$vm.bulkRemove()"><i class="fa fa-trash"></i> Delete</a>
                    </li>
                </ul>
            </div>

            <div class="btn-group" uib-dropdown>
                <button class="btn btn-primary btn-sm dropdown-toggle" uib-dropdown-toggle type="button">
                    <i class="fa fa-filter"></i>
                    Quick Filters
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li>
                        <a ng-click="$vm.filterByStatus('Open')"><i class="fa fa-folder-open-o"></i> Open cases</a>
                    </li>
                    <li>
                        <a ng-click="$vm.filterByStatus('Resolved')"><i class="fa fa-folder-o"></i> Closed cases</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a ng-click="$vm.filterMyOpenCases()"><i class="fa fa-folder-open"></i> My open cases</a>
                    </li>
                    <li>
                        <a ng-click="$vm.filterMyCases()"><i class="fa fa-user"></i> My cases</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a ng-click="$vm.filterMyOrgCases()"><i class="fa fa-building-o"></i> Owned by my org</a>
                    </li>
                    <li>
                        <a ng-click="$vm.filterSharedWithMyOrg()"><i class="fa fa-share-square"></i> Shared with my
                            org</a>
                    </li>
                </ul>
            </div>

            <div class="btn-group" uib-dropdown>
                <button class="btn btn-primary btn-sm dropdown-toggle" uib-dropdown-toggle type="button">
                    <i class="fa fa-sort"></i>
                    Sort by
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '-startDate'])">Newest first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '+startDate'])">Oldest first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '-severity'])">High Severity first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '+severity'])">Low Severity first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '+assignee'])">Ascendant assignee</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-flag', '-assignee'])">Descendant assignee</a>
                    </li>
                </ul>
            </div>

            <div class="btn-group pull-right" role="group">
                <page-sizer collection="$vm.list" sizes="[10, 15, 30, 100]"></page-sizer>
            </div>

            <div class="btn-group pull-right" role="group">
                <button class="btn btn-sm"
                    ng-class="{true: 'btn-primary', false:'btn-default'}[$vm.filtering.context.showFilters]"
                    type="button" ng-click="$vm.toggleFilters()">
                    <i class="fa fa-search"></i> Filters
                </button>
            </div>

            <div class="btn-group pull-right" role="group">
                <button class="btn btn-sm"
                    ng-class="{true: 'btn-primary', false:'btn-default'}[!!$vm.filtering.context.showStats]"
                    type="button" ng-click="$vm.toggleStats()">
                    <i class="fa fa-bar-chart"></i> Stats
                </button>
            </div>

            <div class="btn-group pull-right" role="group">
                <button class="btn btn-sm"
                    ng-class="{true: 'btn-primary', false:'btn-default'}[!!$vm.filtering.context.showAdvanced]"
                    type="button" ng-click="$vm.toggleAdvanced()">
                    <i class="fa fa-code"></i> Custom Fields
                </button>
            </div>
        </div>
    </div>
</div>
